<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>示例4</title>
</head>
<body>
    <div id="app">
       <my-header txt='书影音' src1='img/ic_actionbar_search_icon.png' src2='img/ic_create_group_blue.png'></my-header>
       <my-header txt='广播' src1='img/ic_status_search_user.png' src2='img/ic_create_group_chat_blue.png'></my-header>
       <my-header txt='小组' src1='img/ic_actionbar_search_icon.png' src2='img/ic_create_group_blue.png'></my-header>
       <my-header txt='我的' src2='img/ic_settings.png'></my-header>
    </div>
    <!-- 定义组件模板 -->
    <template id="parent">
        <div class="tabbarWrap">
            <span>{{txt}}</span>
            <img :src="src1" class="leftImg">
            <img :src="src2" class="rightImg">
        </div>
    </template>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script type="text/javascript">
        var vm = new Vue({
            el: '#app',
            data: {

            },
        components: {
                    "myHeader":{
                        template:"#head",
                        props:["txt","src1","src2"]
                    }
                }
    });
    </script>
</body>
</html>